<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="include/includeTablebase"></head>
<body>
<div id="content" class="row-fluid">
    <div class="col-md-3 " style="margin-top: 10px;">
        <ul id="menu_tree" class="ztree" style="width:560px; overflow:auto;"></ul>
    </div>
    <div class="col-md-9">
        <div class="panel panel-default" style="margin-top: 10px;">
            <div class="panel-heading" id="treeButtonTitle">查询条件</div>
            <div class="panel-body">
                <form class="form-inline" role="form" style="float: left; width: 100%;" method="post" id="queryTreeButton">
                    <input type="hidden" id="pId" name="pId" value="" />
                    <div class="form-group">
                        <label for="name">按钮名字:</label>
                        <input type="text" class="form-control" name="name" id="name"  placeholder="请输入按钮名字" />
                    </div>
                    <div class="form-group">
                        <label for="name">按钮编码:</label>
                        <input type="text" class="form-control" name="code" id="code"  placeholder="请输入按钮编码" />
                    </div>
                    <div class="form-group">
                        <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button>
                    </div>
                </form>
            </div>
        </div>
        <table id="tree-button-table" style="margin-top: -50px;">
        </table>
    </div>
</div>
<script th:inline="javascript">
    var zTree;
    var demoIframe;
    var selectNode;

    // 获取当前窗口的宽度
    var winWidth = $(window.parent.document).find("#wrapper").width();

    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button remove' id='removeBtn_" + treeNode.tId + "' title='add node' onfocus='this.blur();'></span>";
        addStr += "<span class='button add' id='addBtn_" + treeNode.tId + "'></span>";
        addStr += "<span class='button edit' id='editBtn_" + treeNode.tId + "'></span>";
        if(treeNode.isParent){
            addStr += "<span class='button add' id='addParentBtn_" + treeNode.tId + "'></span>";
        }
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            zTree = $.fn.zTree.getZTreeObj("menu_tree");
            selectNode = treeNode;
            window.Ewin.dialog({title:"添加",url:"tree/addTreePage?id="+treeNode.id,width:winWidth<=415?winWidth-20:600,height:400})
            return false;
        });
        var remove_btn = $("#removeBtn_"+treeNode.tId);
        if (remove_btn) remove_btn.bind("click", function() {
            zTree = $.fn.zTree.getZTreeObj("menu_tree");
            if (treeNode.isParent) {
                window.Ewin.alert({message:"请先删除当前菜单节点底下的子菜单！"});
            }else{
                window.Ewin.confirm({title: '提示', message: '是否要删除您当前选中的菜单节点？', width: 500}).on(function (e) {
                    if (e) {
                        $.post("tree/remove",{id:treeNode.id},function(e){
                            if(e.result){
                                zTree.removeNode(treeNode);
                                window.Ewin.alert({message:e.msg});
                            }else{
                                window.Ewin.alert({message:e.msg});
                            }
                        })
                    }
                });
            }
            return false;
        });
        var edit_btn = $("#editBtn_"+treeNode.tId);
        if (edit_btn) edit_btn.bind("click", function(){
            zTree = $.fn.zTree.getZTreeObj("menu_tree");
            selectNode = treeNode;
            window.Ewin.dialog({title:"修改",url:"tree/updateTreePage?id="+treeNode.id,width:winWidth<=415?winWidth-20:600,height:400})
            return false;
        });
        var add_parent_btn = $("#addParentBtn_"+treeNode.tId);
        if (add_parent_btn) add_parent_btn.bind("click", function(){
            zTree = $.fn.zTree.getZTreeObj("menu_tree");
            selectNode = null;
            window.Ewin.dialog({title:"添加",url:"tree/addTreePage",width:winWidth<=415?winWidth-20:600,height:400})
            return false;
        })
    };

    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
        $("#removeBtn_"+treeNode.tId).unbind().remove();
        $("#editBtn_"+treeNode.tId).unbind().remove();
        $("#addParentBtn_"+treeNode.tId).unbind().remove();
    };

    var setting = {
        check: {
            enable: false
        },
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable:true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: "0"
            }
        },
        callback: {
            beforeClick: function(treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj('menu_tree');
                $("#pId").attr("value",treeNode.id);
                $("#treeButtonTitle").html("查询条件（"+treeNode.name+"）")
                doQuery();
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    return true;
                }
            }
        }
    };

    function loadReady() {
        var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
            htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
            maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
            h = demoIframe.height() >= maxH ? minH:maxH;
        if (h < 530){
            h = 530;
        }
        demoIframe.height(h);
    }

    $(function() {
        $.post("/tree/loadTree?type=1",function(info){
            var t = $("#menu_tree");
            t = $.fn.zTree.init(t, setting,info.data);
            $("#pId").attr("value",$.fn.zTree.getZTreeObj('menu_tree').getNodes()[0].id);
            $("#treeButtonTitle").html("查询条件（"+$.fn.zTree.getZTreeObj('menu_tree').getNodes()[0].name+"）")
            initTable();
            // 展开所有的菜单节点
            t.expandAll(true);
        })
    });

    function doQuery(){
        // 移除遮罩层的属性否则会导致在移动端无法显示滚动条
        $('body').removeClass("modal-open");
        $('#tree-button-table').bootstrapTable('refresh');    //刷新表格
    }

    function initTable(){
        $.fn.bTableUtil({
            id: "tree-button-table",
            url: "/tree/treeButtonList?type=2",
            formId: "queryTreeButton",
            sortName: 'id',
            sortOrder: 'desc',
            toolbars:[
                {
                    text: '添加',
                    iconCls: 'glyphicon glyphicon-plus',
                    code :  'add_tree_button',
                    verify : false,
                    handler: function () {
                        window.Ewin.dialog({title:"添加",url:"tree/addTreeButtonPage?id="+$("#pId").val(),gridId:"gridId",width:winWidth<=415?winWidth-20:600,height:winWidth<=415?275:300})
                    }
                },
                {
                    text: '修改',
                    iconCls: 'glyphicon glyphicon-pencil',
                    code :  'edit_tree_button',
                    verify : false,
                    handler: function () {
                        var rows = $('#tree-button-table').bootstrapTable('getSelections');
                        if(rows.length==0||rows.length>1){
                            window.Ewin.alert({message:'请选择一条需要修改的数据!'});
                            return false;
                        }
                        window.Ewin.dialog({title:"修改",url:"tree/updateTreeButtonPage?id="+rows[0].id,gridId:"gridId",width:winWidth<=415?winWidth-20:470,height:460});
                    }
                },
                {
                    text: '删除',
                    iconCls: 'glyphicon glyphicon-remove',
                    code :  'remove_tree_button',
                    verify : false,
                    handler: function () {
                        var rows = $('#tree-button-table').bootstrapTable('getSelections');
                        if(rows.length==0){
                            window.Ewin.alert({message:'请选择一条需要删除的数据!'});
                            return false;
                        }
                        window.Ewin.confirm({title:'提示',message:'是否要删除您所选择的记录？',width:500}).on(function (e) {
                            if (e) {
                                $.post("tree/removeBath",{json:JSON.stringify(rows)},function(e){
                                    if(e.result){
                                        window.Ewin.alert({message:e.msg});
                                        doQuery();
                                    }else{
                                        window.Ewin.alert({message:e.msg});
                                    }
                                });
                            }
                        });
                    }
                }
            ],
            columns: [
                {
                    checkbox: true
                },
                {
                    field: '',
                    title: '序号',
                    formatter: function (value, row, index) {
                        return index+1;
                    }
                },
                {
                    field : 'name',
                    title : '按钮名字',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                },
                {
                    field : 'code',
                    title : '按钮编码',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                },
                {
                    field : 'state',
                    title : '按钮状态',
                    align : 'center',
                    valign : 'middle',
                    sortable : true,
                    formatter: function (value, row, index) {
                        return getCodeDictText("TREE_STATE",value);
                    }
                }]
        });
    }

</script>
</body>
</html>